<div>
  <div
    *ngIf="productRemoved"
    class="alert-success">
    Product has been successfully removed!
  </div>
  <table class="product-table">
    <tr>
      <th>PRODUCT</th>
      <th>EDIT</th>
      <th>DELETE</th>
    </tr>
    <tr *ngFor="let product of products; let i = index">
      <td>{{product.productName}}</td>
      <td><button
        [routerLink]='["/products-manage/", product.productName]'
        class="edit-button"
      >Edit</button></td>
      <td><button
        (click)="removeProduct(product.productName)"
        class="delete-button"
      >X</button></td>
    </tr>
  </table>
  <button
    routerLink="product-add"
    class="add-product-button"
  >Add new product</button>
</div>
